<template>
	<view>
		<view class="top"
			v-if="type=='APPEAL_BUYER'||type=='APPEAL_SELLER'||type=='RESUBMITTED_VOUCHER'||type=='REJECT'">
			<view class="title">
				<view class="name" v-if="type=='APPEAL_BUYER'||type=='APPEAL_SELLER'">
					申诉原因
				</view>
				<view class="name" v-if="type=='RESUBMITTED_VOUCHER'||type=='REJECT'">
					驳回原因
				</view>
				<view class="right" @click="show1=true,co=2" v-if="type=='REJECT'">
					申诉
				</view>
			</view>
			<view class="yuan">
				<view class="img" @click="seeImage(getHead(info.reason_picture))">
					<view class="mode">
						<view>
							查看
						</view>
						<view>
							图片
						</view>
					</view>
					<image :src="getHead(info.reason_picture)" mode=""></image>
				</view>
				<view class="right">
					<view class="name">
						原因类型:
					</view>
					<view class="text">
						{{info.reason}}
					</view>
				</view>
			</view>
		</view>
		<view class="top" v-if="type=='APPEAL_BUYER'||type=='APPEAL_SELLER'">
			<view class="title">
				<view class="name">
					扣分提示
				</view>
			</view>
			<view class="content">
				<view class="input">
					被申诉方确认申诉之后，订单将会自动处理，被申诉方将扣除信用积分10分。等待处理过错方将有冻结账号的风险。
				</view>
			</view>
		</view>
		<view class="top">
			<view class="title">
				<view class="name">
					支付凭证
				</view>
			</view>
			<view class="content">
				<view class="image">
					<image :src="img_pre+info.voucher_link" class="img"></image>
				</view>
			</view>
		</view>
		<view class="button">
			<button type="default" v-if="type=='REJECT'" @click="toPage('index?orderno='+orderno+'&state=2')"
				class="b1">重新上传</button>
			<button type="default" v-if="type=='REJECT'" @click="show2=true" class="b2">正确收款码</button>
			<button type="default" v-if="type==0" @click="toast('催促成功，请耐心等待')" class="b2">催促确认</button>
			<button type="default" v-if="type=='APPEAL_SELLER'" @click="modal=true" class="b1">确认申述</button>
		</view>
		<u-popup v-model="show" :closeable="true" borderRadius="10" close-icon-pos="top-left" mode="bottom">
			<view class="harvest">
				<view class="_view">
					<view class="title">
						驳回
					</view>
					<view class="list" v-for="(item,index) in rejectList" :key="index">
						<view class="icon" @click="active=index">
							<image v-if="active==index" src="../static/l4.png" mode=""></image>
							<image v-else src="../static/l3.png" mode=""></image>
						</view>
						<view class="text">
							{{item}}
						</view>
					</view>
					<view class="add" :style="'background-image: url('+img_pre + cover+');'" @click="upload">
						<image src="../static/add.png" mode=""></image>
						<view class="name">
							上传相关图片
						</view>
					</view>
				</view>
				<button type="default" class="button2" @click="checkSafePasswordEmpty">确认提交</button>
				<view class="popup_top"></view>
			</view>
		</u-popup>
		<u-popup v-model="show1" :closeable="true" borderRadius="10" close-icon-pos="top-left" mode="bottom">
			<view class="harvest">
				<view class="_view">
					<view class="title">
						申诉申请
					</view>
					<view class="list" v-for="(item,index) in appealList" :key="index">
						<view class="icon" @click="active=index">
							<image v-if="active==index" src="../static/l4.png" mode=""></image>
							<image v-else src="../static/l3.png" mode=""></image>
						</view>
						<view class="text">
							{{item}}
						</view>
					</view>
					<view class="add" :style="'background-image: url('+img_pre + cover+');'" @click="upload">
						<image src="../static/add.png" mode=""></image>
						<view class="name">
							上传相关图片
						</view>
					</view>
				</view>
				<view class="img">
					<view class="left">
						<image src="../static/w3.png"></image>
					</view>
					<view class="right">
						申诉后账号<text>将被冻结风险，</text> 你将无法进行任何操作
					</view>
				</view>
				<button type="default" class="button2" @click="checkSafePasswordEmpty">确认提交</button>
				<view class="popup_top"></view>
			</view>
		</u-popup>
		<u-keyboard mode="number" :dot-enabled="false" v-model="pay" :tooltip="false" @change="onChange"
			@backspace="onBackspace">
			<view>
				<view class="u-text-center">
					<view class="u-text-name">
						二级密码
					</view>
					<view class="u-text-text">
						您当前正在进行交易，为确保账户安全请输入二级 密码验证身份
					</view>
				</view>
				<view class="u-flex u-row-center">
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" v-model="password"
						:disabled-keyboard="true"></u-message-input>
				</view>
				<view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips"></view>
			</view>
		</u-keyboard>
		<u-modal @confirm="confirm" v-model="modal" :showTitle="false" :showCancelButton="true" :content="content">
		</u-modal>
		<u-popup v-model="show2" :closeable="true" close-icon-pos="top-left" borderRadius="30" mode="bottom">
			<view class="payType">
				<view class="_view">
					<view class="title_item">
						选择查看收款码类型
					</view>
					<u-radio-group v-model="likeFruit" @change="checkboxGroupChange" :width="radioCheckWidth"
						:wrap="radioCheckWrap">
						<view class="contentType">
							<u-row>
								<u-col :span="4" v-for="(item,index) in payType" :key="index">
									<view class="list" @click="checkboxGroupChange(item.type)">
										<image :src="'../../../static/image/r'+index+'.png'" mode=""></image>
										<view class="name">
											{{item.name}}
										</view>
										<view class="checkbox">
											<u-radio shape="circle" :disabled="item.disabled" activeColor="#FB683D"
												v-model="item.checked" :name="item.type"></u-radio>
										</view>
									</view>
								</u-col>
							</u-row>
						</view>
					</u-radio-group>
				</view>
				<view class="button">
					<button type="default" class="b1" @click="zhidao">查看收款码</button>
				</view>
				<view class="popup_top"></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	var than;
	export default {
		data() {
			return {
				co: 0,
				pay: false,
				show: false,
				show1: false,
				show2: false,
				password: "",
				active: 0,
				orderno: "",
				info: {},
				cover: "",
				rejectList: ['我已经完整上传正确图片', '我已经真实转账'],
				appealList: ['我已经完整上传正确图片', '我已经真实转账'],
				content: '确认之后订单自动释放，并扣除信用积分10分。等待处理将有冻结账号的风险。',
				modal: false,
				type: '',
				identity: '',
				likeFruit: 1,
				radioCheckWidth: '34',
				radioCheckWrap: false,
				payType: [{
						type: 1,
						checked: true,
						disabled: false,
						name: "微信",
						scale: 0
					}, {
						type: 2,
						checked: false,
						disabled: false,
						name: "支付宝",
						scale: 0
					},
					{
						type: 3,
						checked: false,
						disabled: false,
						name: "云闪付",
						scale: 0
					},
					{
						type: 4,
						checked: false,
						disabled: false,
						name: "聚合码",
						scale: 0
					},
					{
						type: 5,
						checked: false,
						disabled: false,
						name: "银行卡",
						scale: 0
					}
				],
			}
		},
		onLoad(option) {
			than = this;
			than.orderno = option.orderno;
			if (option.type) {
				than.type = option.type;
			}
			if (option.identity) {
				than.identity = parseInt(option.identity);
			}
		},
		onShow() {
			than.post("api/trade_buyer/infoOfVoucher", {
				orderno: than.orderno
			}, function(data) {
				than.info = data;
			})
		},
		methods: {
			checkboxGroupChange(e) {
				this.likeFruit = e;
			},
			zhidao() {
				than.post("api/Trade_buyer/choseCollectionPicture", {
					picture_type: than.likeFruit,
					orderno: than.orderno
				}, function(data) {
					than.show2 = false;
					than.toPage('/pages/htmlB/voucher/see?number=' + than.info.price + '&orderno=' + than.orderno +
						'&picture_type=' +
						than.likeFruit, +'&img=' + data)
				})
			},
			confirm() {
				than.back();
			},
			upload() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					success: function(res) {
						than.uploadPost("api/image/uploadMultiple", res.tempFilePaths[0], "file", function(
							data) {
							than.cover = data.url
						})
					}
				});
			},
			back() {
				than.co = 3
				than.checkSafePasswordEmpty()
			},
			confirmAppeal() {
				than.post("api/trade_buyer/confirmAppeal", {
					orderno: than.orderno,
					password: than.password
				}, function(data) {
					than.toast(data)
					setTimeout(function() {
						uni.navigateBack()
					}, 1500);
				})
			},
			checkSafePasswordEmpty() {
				than.post("api/member/checkSafePasswordEmpty", null, function(data) {
					if (parseInt(data) == 0) {
						than.toast("未设置二级密码")
						uni.navigateTo({
							url: "/pages/htmlA/setting/twopassword"
						})
					} else {
						than.pay = true;
					}
				})
			},
			reject() {
				than.post("api/trade_buyer/reject", {
					content: than.rejectList[than.active],
					orderno: than.orderno,
					cover: than.cover,
					password: than.password
				}, function(data) {
					than.info = data;
					than.cover = "";
					than.toast("驳回成功")
					setTimeout(function() {
						uni.navigateBack()
					}, 1500);
				})
			},
			appeal() {
				than.post("api/trade_buyer/appeal", {
					content: than.appealList[than.active],
					orderno: than.orderno,
					cover: than.cover,
					password: than.password
				}, function(data) {
					than.info = data;
					than.cover = "";
					than.toast("申诉成功")
					setTimeout(function() {
						uni.navigateBack()
					}, 1500);
				})
			},
			onChange(val) {
				if (this.password.length < 6) {
					this.password += val;
				}

				if (this.password.length >= 6) {
					than.$u.throttle(than.getResult);
				}
			},
			getResult() {
				if (than.co == 1) {
					than.reject()
				} else if (than.co == 2) {
					than.appeal()
				} else {
					than.confirmAppeal()
				}
			},
			onBackspace(e) {
				if (this.password.length > 0) {
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
		}
	}
</script>

<style lang="less">
	.payType {
		text-align: center;

		.popup_top {
			height: 30rpx;
		}

		._view {
			margin: 0 20rpx;
			padding-bottom: 1rpx;

			.title_item {
				height: 108rpx;
				line-height: 108rpx;
				text-align: center;
				border-bottom: 2rpx solid #F6F6F6;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.contentType {
				padding: 0 100rpx;

				.active {
					border: 1rpx solid #FFC31E !important;
					background: #FBF9F2;
				}

				.list {
					margin-top: 67rpx;
					text-align: center;
					border-radius: 20rpx;
					position: relative;
					border: 1rpx solid #FFFFFF;

					image {
						margin-top: 38rpx;
						width: 77rpx;
						height: 77rpx;
					}

					.checkbox {
						display: flex;
						justify-content: center;
					}

					.name {
						line-height: 60rpx;
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
					}
				}
			}
		}

		.button {
			margin: 20rpx auto 0;

			.b1 {
				margin: 36rpx auto 0;
				width: 245rpx;
				height: 74rpx;
				background: #FB683D;
				border-radius: 20rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 74rpx;
			}
		}
	}

	.yuan {
		display: flex;
		align-items: center;
		width: 678rpx;
		height: 165rpx;
		background: #FDF4ED;
		border-radius: 20rpx;
		margin: auto;

		.img {
			margin: 0 24rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 6rpx;
			position: relative;

			.mode {
				width: 100rpx;
				height: 100rpx;
				position: absolute;
				text-align: center;
				z-index: 1;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: rgba(0, 0, 0, 0.6);

				view {
					margin-top: 10rpx;
				}
			}

			image {
				position: absolute;
				width: 100%;
				height: 100%;
				background: #000000;
				border-radius: 6rpx;
			}
		}

		.right {
			.name {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #555555;
			}

			.text {
				margin-top: 5rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}
		}
	}

	.harvest {
		text-align: center;

		.popup_top {
			height: 30rpx;
		}

		.img {
			overflow: hidden;
			padding: 0 55rpx;
			margin-top: 44rpx;

			.left {
				float: left;

				image {
					width: 27rpx;
					height: 27rpx;
				}
			}

			.right {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;

				text {
					color: #004FFF;
				}
			}

		}

		._view {
			background: #FFFFFF;
			margin: 0 30rpx;
			padding-bottom: 1rpx;

			.add {
				margin: 30rpx auto;
				width: 339rpx;
				height: 400rpx;
				background: #F8F8F8;
				border-radius: 20rpx;
				text-align: center;
				background-size: 100% 100%;

				image {
					margin-top: 110rpx;
					margin-bottom: 30rpx;
					width: 61rpx;
					height: 61rpx;
				}

				.name {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #3E3E3E;
				}
			}

			.title {
				height: 111rpx;
				line-height: 111rpx;
				text-align: center;
				border-bottom: 2rpx solid #F6F6F6;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.list {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 70rpx;

				.icon {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 50rpx;
					height: 50rpx;
					margin-right: 31rpx;

					image {
						width: 30rpx;
						height: 30rpx;

					}
				}

				.text {

					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}

		}

		.button2 {
			margin: 20rpx auto 0;
			color: #FFFFFF;
			width: 245rpx;
			height: 74rpx;
			background: #FB683D;
			border-radius: 20rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 74rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
		}

	}



	.button {
		padding: 28rpx 0;
		display: flex;

		.b3 {
			width: 260rpx;
			height: 74rpx;
			line-height: 74rpx;
			background: #F1F1F1;
			border-radius: 20rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.b1 {
			width: 260rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			background: #FB683D;
			border-radius: 20rpx;
		}

		.b2 {
			width: 260rpx;
			height: 80rpx;
			line-height: 80rpx;
			color: #333333;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			background: #F1F1F1;
			border: 0rpx solid #F1F1F1;
			border-radius: 20rpx;
		}
	}

	.top {
		padding: 0 36rpx;

		.title {
			height: 110rpx;
			display: flex;
			align-items: center;

			.name {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
			}

			.right {
				margin-left: auto;
				text-align: center;
				line-height: 48rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				width: 90rpx;
				height: 48rpx;
				background: linear-gradient(90deg, #EE7F57, #FA9D5F);
				box-shadow: 0px 4rpx 6rpx 0px rgba(237, 125, 85, 0.2);
				border-radius: 10rpx;
			}

			.img {
				width: 52rpx;
				height: 52rpx;
				margin-left: 23rpx;
			}
		}

		.content {
			border-radius: 20rpx;

			.input {
				padding: 36rpx 26rpx;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #555555;

			}

			.image {
				text-align: center;
				margin: auto;
				width: 678rpx;
				height: 968rpx;
				background: linear-gradient(180deg, #EEF7FE, #FBFCFE);
				border-radius: 20rpx;

				.img {
					margin-top: 50rpx;
					width: 472rpx;
					height: 839rpx;
				}

				.name {

					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					height: 102rpx;
					line-height: 102rpx;

					text {
						color: #F11D07;
						margin: auto 10rpx;
					}
				}
			}
		}
	}
</style>
